<template>
	<uv-tabs :current="current" :list="tabs" :lineHeight="2" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
		@change="change"></uv-tabs>
</template>

<script setup>
	import {
		ref,
		toRef,
		watch
	} from 'vue'

	const props = defineProps({
		tabs: {
			type: Object,
			default: () => {}
		},
		modelValue: {
			type: Number,
			default: 0
		}
	})
	const emit = defineEmits(['update:modelValue'])

	const current = ref(0)

	const tabs = toRef(props, 'tabs')
	const modelValue = toRef(props, 'modelValue')

	watch(modelValue, (val) => {
		current.value = val
	}, {
		immediate: true
	})
	
	const change = ({
		index
	}) => {
		emit('update:modelValue', index)
	}


	const activeStyle = {
		color: '#36A1EE',
		fontSize: '32rpx',
		fontWeight: '500',
		minWidth: '110rpx',
		textAlign: 'center',
	}
	const inactiveStyle = {
		color: '#999999',
		fontSize: '32rpx',
		fontWeight: '500',
		minWidth: '110rpx',
		textAlign: 'center',
	}
</script>

<style lang="scss">
</style>